import QtQuick 2.7
import QtQuick.Window 2.15
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.5
import QtQuick.Templates 2.5 as T
import org.ukui.qqc2style.private 1.0 as StylePrivate
import ukui.menu 1.0 as MyTestMenu
import org.ukui.quick.items 1.0 as UkuiItems


T.Menu {
    id: control
//    StylePrivate.APPParameter{
//        id: appP
//    }
    palette: app.palette
    font: app.font

    implicitWidth: Math.max(background ? background.implicitWidth : 0,
                            contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
    implicitHeight: Math.max(background ? background.implicitHeight : 0,
                             contentItem ? contentItem.implicitHeight : 0) + topPadding + bottomPadding

    margins: 0

    leftPadding: menu.leftRightPadding
    rightPadding: menu.leftRightPadding
    topPadding: menu.topBottomPadding
    bottomPadding: menu.topBottomPadding
    property var maxW: 0

//    StylePrivate.UKUIMenu{
//        id: uMenu
//    }


//    StylePrivate.ParseInterface{
//        id: parseInterface
//    }

    function getStartColor(dtcolor)
    {
        return "red"//parseInterface.pStartColor(dtcolor)
    }
    function getEndColor(dtcolor)
    {
        return "blue"//parseInterface.pEndColor(dtcolor)
    }

    delegate: MenuItem {
    }
    contentItem: ListView {
        implicitHeight: contentHeight
        property bool hasCheckables: false
        property bool hasIcons: false
        model: control.contentModel

        implicitWidth: {
            var maxWidth = 0;
            for (var l in control.contentItem.contentItem.children) {
                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
            }

            if(maxW === 0)
            maxW = maxWidth

//            control.implicitWidth = Math.max(background ? background.implicitWidth : 0,
//                                            contentItem ? maxW + control.leftPadding + control.rightPadding : 0)

            return maxWidth;
        }

        //todo   why ApplicationWindow.window is null
        interactive: Window.window ? contentHeight > Window.window.height : false
        clip: interactive
        currentIndex: control.currentIndex || 0
        keyNavigationEnabled: true
        keyNavigationWraps: true

        //Component.onCompleted: console.log("listview......", ApplicationWindow.window.height)

        ScrollBar.vertical: ScrollBar {
            id: scrollbar
            active: hovered || pressed
            visible: Window.window ? contentHeight > Window.window.height : false
        }
    }

    Connections {
        target: control.contentItem.contentItem
        function onChildrenChanged() {
            var checkable = false;
            var needIcon = false;
            for (var i in control.contentItem.contentItem.children) {
                var child = control.contentItem.contentItem.children[i];
                if (child.checkable) {
                    control.contentItem.hasCheckables = true;
                    checkable = true;
                }
                if (child.icon && child.icon.hasOwnProperty("name") && (child.icon.name.length > 0 || child.icon.source.toString().length > 0)) {
                    control.contentItem.hasIcons = true;
                    needIcon = true;
                }
            }
            if(checkable){
                for (var k in control.contentItem.contentItem.children) {
                    var childk = control.contentItem.contentItem.children[k];
                    if(childk.hasOwnProperty("itemLeftSpace")){
                        childk.itemLeftSpace = 20 + childk.leftPadding;
                    }
                }
            }
            if(needIcon){
                for (var j in control.contentItem.contentItem.children) {
                    var childj = control.contentItem.contentItem.children[j];
                    var b = childj.icon && childj.icon.hasOwnProperty("name") && (childj.icon.name.length > 0 || childj.icon.source.toString().length > 0);
                    if(childj.hasOwnProperty("labelLeftSpace"))
                        childj.labelLeftSpace = b ? 4 : 20;
                }
            }
            var maxWidth = 0;
            for (var l in control.contentItem.contentItem.children) {
                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
            }
            for (var m in control.contentItem.contentItem.children) {
                control.contentItem.contentItem.children[m].implicitWidth = maxWidth;
            }
        }
    }

    enter: Transition {
        NumberAnimation {
            property: "opacity"
            from: 0
            to: 1
            easing.type: Easing.InOutQuad
            duration: 150
        }
    }

    exit: Transition {
        NumberAnimation {
            property: "opacity"
            from: 1
            to: 0
            easing.type: Easing.InOutQuad
            duration: 150
        }
    }


    onCurrentIndexChanged: back.setCurrentIndex(control.currentIndex)
    onWidthChanged: {
        console.log("onwidthchangeddddd", control.implicitWidth, control.width, control.height)
        back.setWidth(maxW)
    }
    onHeightChanged: {
        console.log("onHeightChanged ddd", control.width, control.height)
        back.setHeight(control.height)
    }

    onVisibleChanged: {
    if(visible)
        back.open()
    else
        back.close()
    }
    onContentItemChanged: {
        back.setContentItem(control.contentItem)

    }


    MyTestMenu.MyMenu{
    id: back

    Component.onCompleted: {
        console.log("menu background component...", control.contentItem)

//            console.log("Menu....", control.width, control.height)
        back.setWidth(control.width)
        back.setHeight(control.height)
        back.setContent(control.contentModel)
        back.setContentItem(control.contentItem)
//            back.setMenuDelegate(control.delegate);
    }

//    background: Item{
//        anchors.fill: parent

//    }



        //        Rectangle{
//        anchors.fill: parent

//        color: "red"
//        opacity: 0.7


        //        UkuiItems.ContentWindow{
//            id:contentWindow
//            screen: MyTestMenu.MyData.screen()

//            Item{
//                width: control.width
//                height: control.height
//                Rectangle{

//                anchors.fill: parent
//                color: "red"
//                opacity: 0.6
//                }
//            }

//            }

//        Rectangle {
//        id: backRec
//        anchors.fill: parent
//        radius: menu.radius

//        color: gradientRec.visible ? "transparent" : getStartColor(menu.normalBC)
//        border.color: getStartColor(menu.normalBorderColor)
//        border.width: menu.border
////        layer.enabled: true

//        Rectangle{
//            id: gradientRec
//            anchors.fill: parent
//            radius: parent.radius
//            border.width: parent.border.width
//            border.color: parent.border.color
//            gradient:  Gradient {
//                id:gradient
//                GradientStop { position: 0.0; color: getStartColor(menu.normalBC) }

//                GradientStop { position: 1.0; color: getEndColor(menu.normalBC)}
//            }
//            visible: false//!parseInterface.isSolidPattern(menu.normalBC)
//        }



//    }
}

    StylePrivate.UKUIMenu{
        id: menu
    }

    StylePrivate.APPParameter{
        id: app
    }
}







/*
T.Menu{
    id: control
    implicitWidth: 100//contentItem.implicitWidth + leftPadding + rightPadding
    implicitHeight: 200//contentItem.implicitHeight + topPadding + bottomPadding

    background: Item{
        anchors.fill: parent
        MyTestMenu.MyMenu{
        id: back

        Component.onCompleted: {
            console.log("menu background component...", control.contentItem)

//            console.log("Menu....", control.width, control.height)
            back.setWidth(control.width)
            back.setHeight(control.height)
            back.setContent(control.contentModel)
//            back.setMenuDelegate(control.delegate);
        }
    }
    }



    delegate: MenuItem {
        //visible: false
        Component.onCompleted: console.log("TestMenu MenuItemmmmmm")
    }
    contentItem: ListView {
        id: listview
        implicitHeight: contentHeight
        property bool hasCheckables: false
        property bool hasIcons: false
        model: control.contentModel
        implicitWidth: {
            var maxWidth = 0;
            for (var l in control.contentItem.contentItem.children) {
                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
                    maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
            }

//            if(maxW === 0)
//                maxW = maxWidth

            //            control.implicitWidth = Math.max(background ? background.implicitWidth : 0,
            //                                            contentItem ? maxW + control.leftPadding + control.rightPadding : 0)

            return maxWidth;
        }
}


    onVisibleChanged: {
        if(visible)
            back.open();
        else
            back.close();
    }

    Component.onCompleted: {
        console.log("Menu component....", control.implicitWidth, control.width, control.height, control.visible)

        console.log("menu contentItem...", control.contentItem, control.contentModel, control.contentModel.count)
        back.setWidth(control.width)
        back.setHeight(control.height)
        back.setContent(control.contentModel)
//        back.setMenuDelegate(control.delegate);
        back.setCurrentIndex(control.currentIndex)
        if(control.visible)
            back.open();
    }
//    onContentItemChanged: {
//        console.log("onContentItemChanged...", control.contentItem)
//        back.setContent(listview.model)
//    }
    onCurrentIndexChanged: back.setCurrentIndex(control.currentIndex)
    onWidthChanged: {
        console.log("onwidthchangeddddd", control.implicitWidth, control.width, control.height)
        back.setWidth(maxW)
    }
    onHeightChanged: {
        console.log("onHeightChanged ddd", control.width, control.height)
        back.setHeight(control.height)
    }

}

}
*/
/*
T.Menu {
    id: control
    property var maxW: 0

//    StylePrivate.APPParameter{
//        id: appP
//    }
    palette: app.palette
    font: app.font

    implicitWidth: 100//contentItem.implicitWidth + leftPadding + rightPadding
    implicitHeight: 200//contentItem.implicitHeight + topPadding + bottomPadding

    margins: 0

    leftPadding: menu.leftRightPadding
    rightPadding: menu.leftRightPadding
    topPadding: menu.topBottomPadding
    bottomPadding: menu.topBottomPadding

//    StylePrivate.UKUIMenu{
//        id: uMenu
//    }


//    StylePrivate.ParseInterface{
//        id: parseInterface
//    }

//    function getStartColor(dtcolor)
//    {
//        return parseInterface.pStartColor(dtcolor)
//    }
//    function getEndColor(dtcolor)
//    {
//        return parseInterface.pEndColor(dtcolor)
//    }

//    delegate: MenuItem {
//        //visible: false
//        Component.onCompleted: console.log("TestMenu MenuItemmmmmm")
//    }
    contentItem: ListView {
        id: listview
        implicitHeight: contentHeight
        property bool hasCheckables: false
        property bool hasIcons: false
        model: control.contentModel
//        onModelChanged: {
////            control.update();
//            back.setContent(control.contentItem)
//        }

//        implicitWidth: {
//            var maxWidth = 0;
//            for (var l in control.contentItem.contentItem.children) {
//                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
//                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
//            }

//            if(maxW === 0)
//            maxW = maxWidth

////            control.implicitWidth = Math.max(background ? background.implicitWidth : 0,
////                                            contentItem ? maxW + control.leftPadding + control.rightPadding : 0)

//            return maxWidth;
//        }

        //todo   why ApplicationWindow.window is null
        interactive: Window.window ? contentHeight > Window.window.height : false
        clip: interactive
        currentIndex: control.currentIndex || 0
        keyNavigationEnabled: true
        keyNavigationWraps: true

        //Component.onCompleted: console.log("listview......", ApplicationWindow.window.height)

        ScrollBar.vertical: ScrollBar {
            id: scrollbar
            active: hovered || pressed
            visible: Window.window ? contentHeight > Window.window.height : false
        }
        //visible: false

        onModelChanged:{
            console.log("listview modelchangeddddd...", listview.model)
            back.setContent(listview.model)
        }
    }
//    onDelegateChanged: back.setMenuDelegate(control.delegate);

    Connections {
        target: control.contentItem.contentItem
        function onChildrenChanged() {
            var checkable = false;
            var needIcon = false;
            for (var i in control.contentItem.contentItem.children) {
                var child = control.contentItem.contentItem.children[i];
                if (child.checkable) {
                    control.contentItem.hasCheckables = true;
                    checkable = true;
                }
                if (child.icon && child.icon.hasOwnProperty("name") && (child.icon.name.length > 0 || child.icon.source.toString().length > 0)) {
                    control.contentItem.hasIcons = true;
                    needIcon = true;
                }
            }
            if(checkable){
                for (var k in control.contentItem.contentItem.children) {
                    var childk = control.contentItem.contentItem.children[k];
                    if(childk.hasOwnProperty("itemLeftSpace")){
                        childk.itemLeftSpace = 20 + childk.leftPadding;
                    }
                }
            }
            if(needIcon){
                for (var j in control.contentItem.contentItem.children) {
                    var childj = control.contentItem.contentItem.children[j];
                    var b = childj.icon && childj.icon.hasOwnProperty("name") && (childj.icon.name.length > 0 || childj.icon.source.toString().length > 0);
                    if(childj.hasOwnProperty("labelLeftSpace"))
                        childj.labelLeftSpace = b ? 4 : 20;
                }
            }
            var maxWidth = 0;
            for (var l in control.contentItem.contentItem.children) {
                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
            }
            for (var m in control.contentItem.contentItem.children) {
                control.contentItem.contentItem.children[m].implicitWidth = maxWidth;
            }
            maxW = maxWidth;
//            console.log("control implicitwidth...", control.implicitWidth)
        }
    }

    enter: Transition {
        NumberAnimation {
            property: "opacity"
            from: 0
            to: 1
            easing.type: Easing.InOutQuad
            duration: 150
        }
    }

    exit: Transition {
        NumberAnimation {
            property: "opacity"
            from: 1
            to: 0
            easing.type: Easing.InOutQuad
            duration: 150
        }
    }

//    background: Rectangle{
//        anchors.fill: parent
//        color: "red"
//    }

    background: Item{
        anchors.fill: parent
        MyTestMenu.MyMenu{
        id: back

        Component.onCompleted: {
            console.log("menu background component...", control.contentItem)

//            console.log("Menu....", control.width, control.height)
            back.setWidth(control.width)
            back.setHeight(control.height)
            back.setContent(listview.model)
//            back.setMenuDelegate(control.delegate);
        }
    }
    }
    onVisibleChanged: {
        if(visible)
            back.open();
        else
            back.close();
    }
    StylePrivate.UKUIMenu{
        id: menu
    }

    StylePrivate.APPParameter{
        id: app
    }
    Component.onCompleted: {
        console.log("Menu component....", control.implicitWidth, control.width, control.height, control.visible)

        console.log("menu contentItem...", control.contentItem, control.contentModel, control.contentModel.count)
        back.setWidth(maxW)
        back.setHeight(control.height)
        back.setContent(listview.model)
//        back.setMenuDelegate(control.delegate);
        back.setCurrentIndex(control.currentIndex)
        if(control.visible)
            back.open();
    }
//    onContentItemChanged: {
//        console.log("onContentItemChanged...", control.contentItem)
//        back.setContent(listview.model)
//    }
    onCurrentIndexChanged: back.setCurrentIndex(control.currentIndex)
    onWidthChanged: {
        console.log("onwidthchangeddddd", control.implicitWidth, control.width, control.height)
        back.setWidth(maxW)
    }
    onHeightChanged: {
        console.log("onHeightChanged ddd", control.width, control.height)
        back.setHeight(control.height)
    }
}

*/
